<template>
  <section class="container" v-title data-title="六个轮子共享汽车" :class="{overflow:shade}">
<!--     <div class="shade" v-show = "shade" @click = "shadeClick" >
      <div class="guidance" :style="{ top:  (scroll*2+41)*0.01+ 'rem',display:'block' }"></div>
    </div> -->
    <div class="register" >
      <div class="register_top">
        <div class="register_top1">
          <img src="../styles/asset/invitationNew/001.png" alt="">
        </div>
        <div class="register_top2">
          <img src="../styles/asset/invitationNew/002.png" alt="">
        </div>
        <div class="register_top2_code">
          <span>您的邀请码：</span>
          <span class="register_top2_code_right">{{this.inviterPhone}}</span>
        </div>
      </div>
      <div class="register_btm" v-if="!wx_app">
        <div class="register_btm_left">
          <div class="btm_left_circle" @click="openFriends()"><i></i><span>微信朋友圈</span></div>
        </div>
        <div class="register_btm_right">
          <div class="btm_left_friends" @click="openCircle()"><i></i><span>微信好友</span></div>
        </div>
      </div>
      <div class="register_btm"  v-if="wx_app">
          <div class="share">点击右上角按钮分享</div>
      </div>
      <div class="activity-rules">
      <div class="rules-title"><p>活动规则</p></div>
      <div class="rules-text" v-show = "show">
        <p><span>01</span>活动期间，每邀请1位好友成功用车，可获赠68元大礼包。</p>
        <p><span>02</span>礼包中的代金券仅可用于抵扣4轮汽车用车费用，不找零，不兑现，服务费另付。</p>
        <p><span>03</span>礼包将于受邀好友第一笔用车订单支付完成的3个工作日内到账，可在APP个人中心—我的钱包—优惠券中查看。</p>
        <p><span>04</span>获赠礼包自领取日起15天内使用有效。</p>
        <p><span>05</span>每笔订单仅能使用1张代金券，不与其他优惠券并行享用。</p>
      </div>
     </div>
      <div class="register_bottom">
        <img src="../styles/asset/invitationNew/03.jpg" alt="">
      </div>
    </div>
    <simplert  ref="simplert"></simplert>
  </section>
</template>

<script>
    var wx = require('weixin-js-sdk');
    import Simplert from '../../components/dialog/dialog.vue'

  var filters = {
    parseURL:function(url) {
      var a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          var ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  }

  export default {
    data() {
      return {
        inviterPhone: '',
        type: '1',
        img: require('../../activities/styles/asset/car-share.png'),
        show: false,
        shade:false,
        scroll: '',
        wx_app:''
      }
    },
    created() {

    },
    mounted() {
      const that = this;
      const url = window.location.href;
      if(url.indexOf('wx_app')>0){
        this.wx_app = filters.parseURL(url).params.wx_app;
        this.detail = filters.parseURL(url).params.detail;
      }else{
        this.wx_app = ''
      }
      this.$util.getUserToken().then(token=>{
        that.token = token;
        that.getPhone();
      })
      let root = process.env.MAIN_ROOT;
      console.log(root+this.img)
      this.$util.sendShareMessage("有驾照的统统看过来，共享汽车1元开走，快来试试>>","快来开共享汽车！注册即送 共享汽车68元代金券", root+this.img ,root+'/#/app/invitationRegisterNew1?inviterPhone='+ this.inviterPhone);

      this.show = true;

     window.addEventListener('scroll', this.menu)


    },
    components: {
      Simplert
    },
    methods: {
      getPhone(){
        const that = this;
        that.$api.post('/user/v1/authApi/index',{},s=>{
          // s.module.forEach(function(e){
          //   that.inviterPhone = e.phone
          // })
          // alert(s.module.phone);
          that.inviterPhone=s.module.phone;
          if(window.location.href.indexOf('wx_app')>0){
            // 小程序分享title，url
            wx.miniProgram.postMessage({
              data: {
                title: '邀请注册',
                wx_url: '#/app/invitationRegisterNew1?detail=false&wx_app=wx_app&inviterPhone='+ that.inviterPhone + '&token='
              }
            })
          }
          let root = process.env.MAIN_ROOT;
      console.log(root+this.img)
      this.$util.sendShareMessage("有驾照的统统看过来，共享汽车，快来试试>>","快来开共享汽车！注册即送 共享汽车68元代金券", root+this.img ,root+'/#/app/invitationRegisterNew1?inviterPhone='+ this.inviterPhone);
        },f=>{
          that.open('用户信息获取失败',false,'','','fade_alert',function(){});
        },{
          'requestPlatform': that.wx_app,
          'token': that.token
        })
      },
      menu() {
        this.scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      },
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message
        };
        this.$refs.simplert.openSimplert(obj);
      },
      openFriends() {
        //朋友圈
        let userAgentObj = navigator.userAgent;
        let root = process.env.MAIN_ROOT;
        if(userAgentObj.match(/Android/i)){
          window.control.WXSceneTimeline('有驾照的统统看过来，共享汽车，快来试试>>','快来开共享汽车！注册即送 共享汽车68元代金券',root+this.img,root+'/#/app/invitationRegisterNew1?inviterPhone='+ this.inviterPhone);
        }else if(userAgentObj.match(/iPhone/i)){
          WXSceneTimeline('有驾照的统统看过来，共享汽车，快来试试>>','快来开共享汽车！注册即送 共享汽车68元代金券',root+this.img,root+'/#/app/invitationRegisterNew1?inviterPhone='+ this.inviterPhone);
        }
      },
      openCircle() {
        //好友

        let userAgentObj = navigator.userAgent;
        let root = process.env.MAIN_ROOT;
        if(userAgentObj.match(/Android/i)){
          window.control.WXSceneSession('有驾照的统统看过来，共享汽车，快来试试>>','快来开共享汽车！注册即送 共享汽车68元代金券',root+this.img,root+'/#/app/invitationRegisterNew1?inviterPhone='+ this.inviterPhone);
        }else if(userAgentObj.match(/iPhone/i)){
          WXSceneSession('有驾照的统统看过来，共享汽车，快来试试>>','快来开共享汽车！注册即送 共享汽车68元代金券',root+this.img,root+'/#/app/invitationRegisterNew1?inviterPhone='+ this.inviterPhone);
        }
      }
      // ,
      // shadeClick () {
      //     this.shade = false;
      // }
    }
  }
</script>
<style>
  #app {
    height: auto;
  }
</style>
<style scoped >
  @import "../../activities/styles/styles.css";
  .share{
    margin:.51rem;
    font:0.30rem/0.58rem "Microsoft Yahei";
    text-align: center;
    color:#ff3b29;
  }
  body {
    background: #eeeeee;
  }
  .container {
    position: relative;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    background: #fcfcfc;
  }
  .register {
    overflow-y: auto;
    margin: 0 auto;
    max-width: 750px;
    display: flex;
    flex-wrap: wrap;
  }
  .overflow{
    overflow: hidden;
  }
  .shade{
    position: fixed;
    left:0;
    top:0;
    z-index: 1000;
    width: 100%;
    /*height:12.2rem;*/
    height:100%;
    background:rgba(0,0,0,0.8);
  }
  .shade .guidance{
    position:absolute;
    top:0.41rem;
    right:0.57rem;
    width:5.46rem;
    height:5.12rem;
    background:url('../styles/asset/invitationNew/shade.png') no-repeat;
    background-size:100% 100%;
  }

  .register .register_top1,
  .register .register_top2,
  .register .register_btm {
    width: 100%;
  }
  .register .register_top1,
  .register .register_top2 {
    position: relative;
  }
  .register_top2_code {
    margin-top:-0.11rem;
    font:0.36rem/0.58rem "Microsoft Yahei";
    text-align: center;
    color:#666;
  }
  .register_top2_code_right{
    border-bottom:2px solid #ff3b29;
    color:#ff3b29;
  }
  .register .register_top1 img,
  .register .register_top2 img {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    border: none;
  }
  .register_btm {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:2rem;
    margin: 0;
    padding: 0;
  }
  .register_btm .register_btm_left,
  .register_btm .register_btm_right{
    width: 100%;
  }
  .register_btm .register_btm_left,
  .register_btm .register_btm_right {
    display: block;
    margin: 0 auto;
    background: #ececec;
    width: 3.11rem;
    height: 1rem;
    border-radius: 50px;
    text-align: center;
  }
  .btm_left_circle{
    width: 100%;
    height:100%;
  }
  .register_btm .register_btm_left span,
  .register_btm .register_btm_right span {
    position:relative;
    top: -0.68rem;
    font:0.30rem/0.1rem "Microsoft Yahei";
    color:#333;
  }
  .register_btm_left .btm_left_circle i,
  .register_btm_right .btm_left_friends i{
    position:relative;
    top: -0.52rem;
    right:0.15rem;
    display: inline-block;
    width: 0.52rem;
    height:0.52rem;
  }
  .register_btm_left .btm_left_circle i {
    background: url('../styles/asset/invitationNew/wx_circle.png') no-repeat;
    background-size: 100% 100%;
  }
  .register_btm_right .btm_left_friends i {
    width: 0.56rem;
    height:0.45rem;
    top: -0.56rem;
    background: url('../styles/asset/invitationNew/wx_friends.png') no-repeat;
    background-size: 100% 100%;
  }
  .activity-rules{
    overflow: hidden;
    position: relative;
    width: 95%;
    min-height:5rem;
    margin:0 auto;
    border:2px solid #ff3b29;
    border-radius:0.12rem;
    background: #fff;
  }
  .rules-title{
    position: absolute;
    top:-0.191rem;
    left:50%;
    margin-left:-1.51rem;
    width: 3.02rem;
    height:1.10rem;
    background:url('../styles/asset/invitationNew/titBg.png') no-repeat;
    background-size: 100% 100%;
  }
  .rules-title p{
    margin-top:0.19rem;
    text-align: center;
    color:#fff;
    font:0.30rem/0.5rem "Microsotf YaHei";
    font-weight: 600;
  }
  .rules-text{
    overflow: hidden;
    padding: 0.95rem 0.35rem 0.2rem;
  }
  .rules-text p{
    margin-bottom:0.05rem;
    font:0.22rem/0.44rem "Microsotf YaHei";
  }
  .rules-text span{
    padding:0.02rem 0.2rem;
    margin-right:0.05rem;
    border-radius:0.3rem;
    background: #ff5d2e;
    color:#fff;
  }
  .register_bottom{
    width: 100%;
    height:2.54rem;
  }
  .register_bottom img{
    width: 100%;
    height:100%;
  }
</style>